<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能文件夹管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            display: flex;
            min-height: calc(100vh - 120px);
            padding: 20px;
            gap: 20px;
        }
        .header {
            background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .panel {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        .panel-header {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .file-tree {
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
        }
        .file-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .file-preview {
            flex: 0 0 420px;
            display: flex;
            flex-direction: column;
        }
        .file-content {
            flex: 1;
            padding: 15px;
            overflow: auto;
        }
        .drawer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: #0d47a1;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: height 0.3s ease;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .drawer.expanded {
            height: 200px;
        }
        .drawer-content {
            padding: 20px;
            display: none;
            color: #333;
        }
        .drawer.expanded .drawer-content {
            display: block;
        }
        .file-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.2s;
        }
        .file-item:hover {
            background: #f0f7ff;
        }
        .file-item.selected {
            background: #e3f2fd;
        }
        .file-icon {
            margin-right: 10px;
            width: 24px;
            text-align: center;
            color: #4a89dc;
        }
        .file-info {
            flex: 1;
            min-width: 0;
        }
        .file-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .file-desc {
            font-size: 12px;
            color: #888;
        }
        .file-actions {
            display: flex;
            gap: 10px;
        }
        .file-actions button {
            padding: 4px 8px;
            font-size: 12px;
        }
        .toolbar {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .breadcrumb {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .breadcrumb a {
            color: #1e88e5;
            text-decoration: none;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        .file-content textarea {
            width: 100%;
            height: 100%;
            min-height: 300px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            font-family: 'Consolas', monospace;
        }
        .quick-folders {
            display: flex;
            gap: 15px;
            padding: 15px;
            flex-wrap: wrap;
        }
        .quick-folder {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            background: #f0f7ff;
            border-radius: 6px;
            width: 100px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .quick-folder:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .quick-folder i {
            font-size: 24px;
            color: #4a89dc;
            margin-bottom: 8px;
        }
        .quick-folder span {
            font-size: 12px;
            text-align: center;
        }
        .search-box {
            margin: 15px;
        }
        .context-menu {
            position: absolute;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            z-index: 1000;
            display: none;
        }
        .context-menu-item {
            padding: 8px 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .context-menu-item:hover {
            background: #f0f7ff;
        }
        .status-bar {
            padding: 10px 15px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }
        @media (max-width: 1200px) {
            .container {
                flex-wrap: wrap;
            }
            .file-tree, .file-preview {
                flex: 1 1 300px;
            }
        }
        .image-preview {
            text-align: center;
            padding: 20px;
        }
        .image-preview img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-folder"></i> 多功能文件夹管理系统</h1>
        <div class="user-info">
            <img src="https://via.placeholder.com/40" class="layui-nav-img">
            <div>管理员 <i class="fas fa-caret-down"></i></div>
        </div>
    </div>

    <div class="container">
        <!-- 左侧文件树 -->
        <div class="panel file-tree">
            <div class="panel-header">
                <span>文件夹结构</span>
                <button class="layui-btn layui-btn-primary layui-btn-sm" id="refreshTree"><i class="fas fa-sync-alt"></i> 刷新</button>
            </div>
            <div class="file-content">
                <ul id="fileTree">
                    <!-- 树形结构会由JS生成 -->
                </ul>
            </div>
        </div>

        <!-- 中间文件列表 -->
        <div class="panel file-list">
            <div class="breadcrumb">
                <a href="#" class="path-link" data-path="">根目录</a> <i class="fas fa-chevron-right" style="font-size: 10px;"></i>
                <a href="#" class="path-link" data-path="project">项目</a> <i class="fas fa-chevron-right" style="font-size: 10px;"></i>
                <a href="#" class="path-link" data-path="project/docs">文档</a>
            </div>
            <div class="toolbar">
                <button class="layui-btn layui-btn-sm" id="newFile"><i class="fas fa-plus"></i> 新建</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="uploadFile"><i class="fas fa-upload"></i> 上传</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="deleteFile"><i class="fas fa-trash"></i> 删除</button>
                <button class="layui-btn layui-btn-sm" id="renameFile"><i class="fas fa-edit"></i> 重命名</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" id="copyFile"><i class="fas fa-copy"></i> 复制</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="moveFile"><i class="fas fa-cut"></i> 移动</button>
                <div class="layui-input-inline" style="margin-left: auto;">
                    <input type="text" placeholder="搜索文件..." class="layui-input layui-input-sm" id="searchInput">
                </div>
            </div>
            <div class="file-content" id="fileListContainer">
                <!-- 文件列表会由JS生成 -->
            </div>
            <div class="status-bar">
                <div>选中: <span id="selectedCount">0</span> 个项目</div>
                <div>总计: <span id="totalCount">5</span> 个项目</div>
            </div>
        </div>

        <!-- 右侧文件预览 -->
        <div class="panel file-preview">
            <div class="panel-header">
                <span>文件预览</span>
                <div>
                    <button class="layui-btn layui-btn-xs layui-btn-primary" id="readOnlyBtn">只读</button>
                    <button class="layui-btn layui-btn-xs" id="editBtn">编辑</button>
                </div>
            </div>
            <div class="file-content" id="previewContainer">
                <textarea id="fileEditor" readonly></textarea>
                <div class="image-preview" id="imagePreview" style="display: none;">
                    <img id="previewImage" src="" alt="图片预览">
                </div>
            </div>
            <div class="toolbar">
                <button class="layui-btn layui-btn-sm" id="saveFile">保存</button>
                <button class="layui-btn layui-btn-sm layui-btn-primary" id="undoEdit">撤销</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="findText">搜索</button>
                <button class="layui-btn layui-btn-sm" id="downloadFile">下载</button>
            </div>
        </div>
    </div>

    <!-- 底部常用文件夹抽屉 -->
    <div class="drawer" id="drawer">
        <i class="fas fa-chevron-up" id="drawerIcon"></i>
        <span style="margin-left: 10px;">常用文件夹</span>
        <div class="drawer-content">
            <div class="quick-folders">
                <div class="quick-folder" data-path="/project/docs">
                    <i class="fas fa-folder"></i>
                    <span>项目文档</span>
                </div>
                <div class="quick-folder" data-path="/images">
                    <i class="fas fa-folder"></i>
                    <span>图片资源</span>
                </div>
                <div class="quick-folder" data-path="/design">
                    <i class="fas fa-folder"></i>
                    <span>设计稿</span>
                </div>
                <div class="quick-folder" data-path="/code">
                    <i class="fas fa-folder"></i>
                    <span>代码库</span>
                </div>
                <div class="quick-folder" data-path="/meetings">
                    <i class="fas fa-folder"></i>
                    <span>会议记录</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 上下文菜单 -->
    <div class="context-menu" id="contextMenu">
        <div class="context-menu-item" data-action="open"><i class="fas fa-folder-open"></i> 打开</div>
        <div class="context-menu-item" data-action="rename"><i class="fas fa-edit"></i> 重命名</div>
        <div class="context-menu-item" data-action="copy"><i class="fas fa-copy"></i> 复制</div>
        <div class="context-menu-item" data-action="move"><i class="fas fa-cut"></i> 移动</div>
        <div class="context-menu-item" data-action="delete"><i class="fas fa-trash"></i> 删除</div>
    </div>

    <script>
        // 文件数据
        const fileData = {
            "": [
                {name: "项目", isFolder: true, path: "project", size: "", modified: "2023-06-10 09:00"},
                {name: "图片资源", isFolder: true, path: "images", size: "", modified: "2023-06-12 14:30"},
                {name: "设计稿", isFolder: true, path: "design", size: "", modified: "2023-06-11 10:15"},
                {name: "代码库", isFolder: true, path: "code", size: "", modified: "2023-06-15 16:45"},
                {name: "会议记录", isFolder: true, path: "meetings", size: "", modified: "2023-06-14 11:20"}
            ],
            "project": [
                {name: "文档", isFolder: true, path: "project/docs", size: "", modified: "2023-06-13 08:45"},
                {name: "计划", isFolder: true, path: "project/plans", size: "", modified: "2023-06-12 15:30"}
            ],
            "project/docs": [
                {name: "项目计划书.docx", isFolder: false, path: "project/docs/plan.docx", size: "128 KB", modified: "2023-06-15 10:30"},
                {name: "需求文档.pdf", isFolder: false, path: "project/docs/requirements.pdf", size: "452 KB", modified: "2023-06-16 14:20"},
                {name: "API说明.md", isFolder: false, path: "project/docs/api.md", size: "56 KB", modified: "2023-06-17 09:15"}
            ],
            "images": [
                {name: "产品图", isFolder: true, path: "images/products", size: "", modified: "2023-06-11 13:25"},
                {name: "图标", isFolder: true, path: "images/icons", size: "", modified: "2023-06-12 16:40"}
            ],
            "design": [
                {name: "UI设计.fig", isFolder: false, path: "design/ui.fig", size: "2.3 MB", modified: "2023-06-18 10:15"},
                {name: "架构图.png", isFolder: false, path: "design/architecture.png", size: "1.8 MB", modified: "2023-06-19 11:30"}
            ]
        };

        // 文件内容
        const fileContents = {
            "project/docs/api.md": `# API 文档

## 用户管理接口

### 获取用户列表
\`\`\`javascript
GET /api/users
参数:
- page: 页码
- limit: 每页数量

响应:
{
  "code": 200,
  "data": {
    "users": [],
    "total": 0
  }
}
\`\`\`

### 创建用户
\`\`\`javascript
POST /api/users
参数:
- name: 用户名
- email: 邮箱
- password: 密码

响应:
{
  "code": 201,
  "data": {
    "id": 1,
    "name": "用户名",
    "email": "user@example.com"
  }
}
\`\`\`

## 文件管理接口

### 上传文件
\`\`\`javascript
POST /api/upload
Content-Type: multipart/form-data

参数:
- file: 文件

响应:
{
  "code": 200,
  "data": {
    "url": "/files/uploaded.pdf",
    "size": 1024
  }
}
\`\`\``,
            "project/docs/plan.docx": "这是一个Word文档的模拟内容，实际系统中会调用相应的应用程序打开。"
        };

        // 当前状态
        let currentState = {
            currentPath: "project/docs",
            selectedFiles: new Set(),
            editMode: false,
            originalContent: ""
        };

        // 初始化LayUI模块
        layui.use(['tree', 'layer', 'upload'], function(){
            var tree = layui.tree;
            var layer = layui.layer;
            var upload = layui.upload;

            // 渲染文件夹树形结构
            renderFileTree();
            
            // 渲染文件列表
            renderFileList(currentState.currentPath);

            // 树形结构刷新按钮
            document.getElementById('refreshTree').addEventListener('click', function() {
                layer.msg('已刷新文件树');
                renderFileTree();
            });

            // 新建文件按钮
            document.getElementById('newFile').addEventListener('click', function() {
                layer.prompt({
                    title: '新建文件',
                    formType: 0
                }, function(value, index, elem){
                    if(value) {
                        // 模拟添加新文件
                        const newFile = {
                            name: value,
                            isFolder: false,
                            path: currentState.currentPath + '/' + value,
                            size: '0 KB',
                            modified: new Date().toLocaleString()
                        };
                        
                        if(!fileData[currentState.currentPath]) {
                            fileData[currentState.currentPath] = [];
                        }
                        
                        fileData[currentState.currentPath].push(newFile);
                        renderFileList(currentState.currentPath);
                        layer.msg('已创建文件: ' + value);
                    }
                    layer.close(index);
                });
            });

            // 上传文件按钮
            var uploadInst = upload.render({
                elem: '#uploadFile',
                url: '/api/upload/', // 实际使用时替换为真实URL
                accept: 'file',
                done: function(res){
                    if(res.code == 0){
                        return layer.msg('上传成功');
                    }
                },
                error: function(){
                    // 请求异常回调
                    layer.msg('模拟上传成功');
                }
            });

            // 删除文件按钮
            document.getElementById('deleteFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要删除的文件');
                }
                
                layer.confirm('确定要删除选中的 ' + currentState.selectedFiles.size + ' 个文件吗？', {
                    title: '确认删除',
                    icon: 3,
                    btn: ['确定', '取消']
                }, function(index){
                    // 模拟删除操作
                    const currentFiles = fileData[currentState.currentPath];
                    fileData[currentState.currentPath] = currentFiles.filter(file => 
                        !currentState.selectedFiles.has(file.path)
                    );
                    
                    currentState.selectedFiles.clear();
                    renderFileList(currentState.currentPath);
                    updateSelectionCount();
                    layer.msg('已删除选中的文件');
                    layer.close(index);
                });
            });

            // 重命名按钮
            document.getElementById('renameFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size !== 1) {
                    return layer.msg('请选择一个文件进行重命名');
                }
                
                const filePath = Array.from(currentState.selectedFiles)[0];
                const fileName = filePath.split('/').pop();
                
                layer.prompt({
                    title: '重命名文件',
                    value: fileName,
                    formType: 0
                }, function(value, index, elem){
                    if(value && value !== fileName) {
                        // 模拟重命名操作
                        const currentFiles = fileData[currentState.currentPath];
                        const fileIndex = currentFiles.findIndex(f => f.path === filePath);
                        
                        if(fileIndex !== -1) {
                            currentFiles[fileIndex].name = value;
                            currentFiles[fileIndex].path = currentState.currentPath + '/' + value;
                            currentFiles[fileIndex].modified = new Date().toLocaleString();
                            
                            renderFileList(currentState.currentPath);
                            layer.msg('已重命名文件');
                        }
                    }
                    layer.close(index);
                });
            });

            // 复制按钮
            document.getElementById('copyFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要复制的文件');
                }
                layer.msg('已复制 ' + currentState.selectedFiles.size + ' 个文件到剪贴板');
            });

            // 移动按钮
            document.getElementById('moveFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要移动的文件');
                }
                layer.msg('已剪切 ' + currentState.selectedFiles.size + ' 个文件');
            });

            // 搜索功能
            document.getElementById('searchInput').addEventListener('keyup', function(e) {
                if(e.key === 'Enter') {
                    const searchTerm = this.value.toLowerCase();
                    if(!searchTerm) {
                        renderFileList(currentState.currentPath);
                        return;
                    }
                    
                    const currentFiles = fileData[currentState.currentPath] || [];
                    const filteredFiles = currentFiles.filter(file => 
                        file.name.toLowerCase().includes(searchTerm)
                    );
                    
                    renderFileList(currentState.currentPath, filteredFiles);
                    layer.msg('找到 ' + filteredFiles.length + ' 个匹配文件');
                }
            });

            // 只读/编辑模式切换
            document.getElementById('readOnlyBtn').addEventListener('click', function() {
                currentState.editMode = false;
                document.getElementById('fileEditor').readOnly = true;
                this.className = 'layui-btn layui-btn-xs layui-btn-primary';
                document.getElementById('editBtn').className = 'layui-btn layui-btn-xs';
                layer.msg('已切换到只读模式');
            });

            document.getElementById('editBtn').addEventListener('click', function() {
                currentState.editMode = true;
                document.getElementById('fileEditor').readOnly = false;
                this.className = 'layui-btn layui-btn-xs layui-btn-primary';
                document.getElementById('readOnlyBtn').className = 'layui-btn layui-btn-xs';
                layer.msg('已切换到编辑模式');
            });

            // 保存文件
            document.getElementById('saveFile').addEventListener('click', function() {
                if(!currentState.editMode) {
                    return layer.msg('当前为只读模式，无法保存');
                }
                
                const content = document.getElementById('fileEditor').value;
                // 模拟保存操作
                if(currentState.selectedFiles.size === 1) {
                    const filePath = Array.from(currentState.selectedFiles)[0];
                    fileContents[filePath] = content;
                    layer.msg('文件已保存');
                }
            });

            // 撤销编辑
            document.getElementById('undoEdit').addEventListener('click', function() {
                if(currentState.editMode) {
                    document.getElementById('fileEditor').value = currentState.originalContent;
                    layer.msg('已撤销更改');
                }
            });

            // 文本搜索
            document.getElementById('findText').addEventListener('click', function() {
                layer.prompt({
                    title: '查找文本',
                    formType: 0
                }, function(value, index, elem){
                    if(value) {
                        const editor = document.getElementById('fileEditor');
                        const content = editor.value;
                        const idx = content.toLowerCase().indexOf(value.toLowerCase());
                        
                        if(idx !== -1) {
                            editor.focus();
                            editor.setSelectionRange(idx, idx + value.length);
                            layer.msg('找到匹配文本');
                        } else {
                            layer.msg('未找到匹配文本');
                        }
                    }
                    layer.close(index);
                });
            });

            // 下载文件
            document.getElementById('downloadFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要下载的文件');
                }
                layer.msg('开始下载选中的 ' + currentState.selectedFiles.size + ' 个文件');
            });

            // 路径导航
            document.querySelectorAll('.path-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const path = this.getAttribute('data-path');
                    currentState.currentPath = path;
                    renderFileList(path);
                    updateBreadcrumb(path);
                });
            });

            // 常用文件夹点击
            document.querySelectorAll('.quick-folder').forEach(folder => {
                folder.addEventListener('click', function() {
                    const path = this.getAttribute('data-path');
                    currentState.currentPath = path.substring(1); // 移除开头的斜杠
                    renderFileList(currentState.currentPath);
                    updateBreadcrumb(currentState.currentPath);
                    layer.msg('已切换到: ' + this.querySelector('span').textContent);
                });
            });

            // 抽屉功能
            var drawer = document.getElementById('drawer');
            var drawerIcon = document.getElementById('drawerIcon');
            
            drawer.addEventListener('click', function(e) {
                if (e.target === drawer || e.target === drawerIcon || e.target.tagName === 'SPAN') {
                    drawer.classList.toggle('expanded');
                    drawerIcon.classList.toggle('fa-chevron-up');
                    drawerIcon.classList.toggle('fa-chevron-down');
                }
            });

            // 初始化文本编辑器
            document.getElementById('fileEditor').addEventListener('focus', function() {
                currentState.originalContent = this.value;
            });
        });

        // 渲染文件树
        function renderFileTree() {
            // 简化实现，实际应用中应该使用layui.tree组件
            const treeContainer = document.getElementById('fileTree');
            treeContainer.innerHTML = '';
            
            // 根节点
            const rootItem = document.createElement('li');
            rootItem.innerHTML = '<i class="fas fa-folder-open"></i> 根目录';
            rootItem.style.padding = '8px 15px';
            rootItem.style.cursor = 'pointer';
            rootItem.addEventListener('click', function() {
                currentState.currentPath = '';
                renderFileList('');
                updateBreadcrumb('');
            });
            treeContainer.appendChild(rootItem);
            
            // 项目文件夹
            const projectItem = document.createElement('li');
            projectItem.innerHTML = '<i class="fas fa-folder"></i> 项目';
            projectItem.style.padding = '8px 15px 8px 30px';
            projectItem.style.cursor = 'pointer';
            projectItem.addEventListener('click', function() {
                currentState.currentPath = 'project';
                renderFileList('project');
                updateBreadcrumb('project');
            });
            treeContainer.appendChild(projectItem);
            
            // 项目文档子文件夹
            const docsItem = document.createElement('li');
            docsItem.innerHTML = '<i class="fas fa-folder"></i> 文档';
            docsItem.style.padding = '8px 15px 8px 45px';
            docsItem.style.cursor = 'pointer';
            docsItem.addEventListener('click', function() {
                currentState.currentPath = 'project/docs';
                renderFileList('project/docs');
                updateBreadcrumb('project/docs');
            });
            treeContainer.appendChild(docsItem);
            
            // 图片资源文件夹
            const imagesItem = document.createElement('li');
            imagesItem.innerHTML = '<i class="fas fa-folder"></i> 图片资源';
            imagesItem.style.padding = '8px 15px 8px 30px';
            imagesItem.style.cursor = 'pointer';
            imagesItem.addEventListener('click', function() {
                currentState.currentPath = 'images';
                renderFileList('images');
                updateBreadcrumb('images');
            });
            treeContainer.appendChild(imagesItem);
            
            // 设计稿文件夹
            const designItem = document.createElement('li');
            designItem.innerHTML = '<i class="fas fa-folder"></i> 设计稿';
            designItem.style.padding = '8px 15px 8px 30px';
            designItem.style.cursor = 'pointer';
            designItem.addEventListener('click', function() {
                currentState.currentPath = 'design';
                renderFileList('design');
                updateBreadcrumb('design');
            });
            treeContainer.appendChild(designItem);
        }

        // 渲染文件列表
        function renderFileList(path, filesToShow = null) {
            const container = document.getElementById('fileListContainer');
            const files = filesToShow || fileData[path] || [];
            
            container.innerHTML = '';
            
            if(files.length === 0) {
                container.innerHTML = '<div style="padding: 20px; text-align: center; color: #888;">该文件夹为空</div>';
                return;
            }
            
            files.forEach(file => {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                if(currentState.selectedFiles.has(file.path)) {
                    fileItem.classList.add('selected');
                }
                
                const iconClass = file.isFolder ? 'fa-folder' : getFileIcon(file.name);
                
                fileItem.innerHTML = `
                    <div class="file-icon"><i class="far ${iconClass}"></i></div>
                    <div class="file-info">
                        <div class="file-name">${file.name}</div>
                        <div class="file-desc">${file.size} · 修改时间: ${file.modified}</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">${file.isFolder ? '打开' : '查看'}</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                `;
                
                // 添加点击事件
                fileItem.addEventListener('click', function(e) {
                    if(e.target.tagName === 'BUTTON') return;
                    
                    if(e.ctrlKey) {
                        // Ctrl+点击多选
                        if(currentState.selectedFiles.has(file.path)) {
                            currentState.selectedFiles.delete(file.path);
                        } else {
                            currentState.selectedFiles.add(file.path);
                        }
                        fileItem.classList.toggle('selected');
                    } else {
                        // 普通点击
                        currentState.selectedFiles.clear();
                        currentState.selectedFiles.add(file.path);
                        document.querySelectorAll('.file-item.selected').forEach(item => {
                            item.classList.remove('selected');
                        });
                        fileItem.classList.add('selected');
                        
                        // 预览文件内容
                        previewFile(file);
                    }
                    
                    updateSelectionCount();
                });
                
                // 添加上下文菜单
                fileItem.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    
                    // 清除其他选中项
                    currentState.selectedFiles.clear();
                    currentState.selectedFiles.add(file.path);
                    document.querySelectorAll('.file-item.selected').forEach(item => {
                        item.classList.remove('selected');
                    });
                    fileItem.classList.add('selected');
                    updateSelectionCount();
                    
                    // 显示上下文菜单
                    const menu = document.getElementById('contextMenu');
                    menu.style.display = 'block';
                    menu.style.left = e.pageX + 'px';
                    menu.style.top = e.pageY + 'px';
                    
                    // 添加菜单项点击事件
                    document.querySelectorAll('.context-menu-item').forEach(item => {
                        item.onclick = function() {
                            const action = this.getAttribute('data-action');
                            handleContextMenuAction(action, file);
                            menu.style.display = 'none';
                        };
                    });
                    
                    // 点击其他地方隐藏菜单
                    document.addEventListener('click', function hideMenu() {
                        menu.style.display = 'none';
                        document.removeEventListener('click', hideMenu);
                    });
                });
                
                container.appendChild(fileItem);
            });
            
            updateSelectionCount();
        }

        // 根据文件名获取图标
        function getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const iconMap = {
                'doc': 'fa-file-word',
                'docx': 'fa-file-word',
                'pdf': 'fa-file-pdf',
                'xls': 'fa-file-excel',
                'xlsx': 'fa-file-excel',
                'ppt': 'fa-file-powerpoint',
                'pptx': 'fa-file-powerpoint',
                'zip': 'fa-file-archive',
                'rar': 'fa-file-archive',
                'gz': 'fa-file-archive',
                'jpg': 'fa-file-image',
                'jpeg': 'fa-file-image',
                'png': 'fa-file-image',
                'gif': 'fa-file-image',
                'txt': 'fa-file-alt',
                'md': 'fa-file-alt',
                'js': 'fa-file-code',
                'html': 'fa-file-code',
                'css': 'fa-file-code',
                'py': 'fa-file-code',
                'java': 'fa-file-code'
            };
            
            return iconMap[ext] || 'fa-file';
        }

        // 预览文件
        function previewFile(file) {
            const editor = document.getElementById('fileEditor');
            const imagePreview = document.getElementById('imagePreview');
            
            if(file.isFolder) {
                // 如果是文件夹，打开它
                currentState.currentPath = file.path;
                renderFileList(file.path);
                updateBreadcrumb(file.path);
            } else if(file.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
                // 如果是图片，显示图片预览
                editor.style.display = 'none';
                imagePreview.style.display = 'block';
                document.getElementById('previewImage').src = 'https://via.placeholder.com/500x300?text=' + file.name;
            } else {
                // 如果是文本文件，显示文本内容
                editor.style.display = 'block';
                imagePreview.style.display = 'none';
                
                if(fileContents[file.path]) {
                    editor.value = fileContents[file.path];
                } else {
                    editor.value = `# ${file.name}\n\n这是一个${file.name.split('.').pop()}格式的文件。\n\n实际系统中会根据文件类型调用相应的应用程序打开。`;
                }
                
                currentState.originalContent = editor.value;
            }
        }

        // 更新面包屑导航
        function updateBreadcrumb(path) {
            const breadcrumb = document.querySelector('.breadcrumb');
            const paths = path ? path.split('/') : [];
            
            let html = '<a href="#" class="path-link" data-path="">根目录</a>';
            
            let currentPath = '';
            paths.forEach((part, index) => {
                currentPath += (currentPath ? '/' : '') + part;
                html += ` <i class="fas fa-chevron-right" style="font-size: 10px;"></i> `;
                html += `<a href="#" class="path-link" data-path="${currentPath}">${part}</a>`;
            });
            
            breadcrumb.innerHTML = html;
            
            // 重新绑定事件
            document.querySelectorAll('.path-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const path = this.getAttribute('data-path');
                    currentState.currentPath = path;
                    renderFileList(path);
                    updateBreadcrumb(path);
                });
            });
        }

        // 更新选中计数
        function updateSelectionCount() {
            document.getElementById('selectedCount').textContent = currentState.selectedFiles.size;
        }

        // 处理上下文菜单操作
        function handleContextMenuAction(action, file) {
            switch(action) {
                case 'open':
                    if(file.isFolder) {
                        currentState.currentPath = file.path;
                        renderFileList(file.path);
                        updateBreadcrumb(file.path);
                    } else {
                        previewFile(file);
                    }
                    break;
                case 'rename':
                    // 模拟重命名操作
                    layer.prompt({
                        title: '重命名',
                        value: file.name,
                        formType: 0
                    }, function(value, index, elem){
                        if(value && value !== file.name) {
                            const currentFiles = fileData[currentState.currentPath];
                            const fileIndex = currentFiles.findIndex(f => f.path === file.path);
                            
                            if(fileIndex !== -1) {
                                currentFiles[fileIndex].name = value;
                                currentFiles[fileIndex].path = currentState.currentPath + '/' + value;
                                currentFiles[fileIndex].modified = new Date().toLocaleString();
                                
                                renderFileList(currentState.currentPath);
                                layer.msg('已重命名');
                            }
                        }
                        layer.close(index);
                    });
                    break;
                case 'copy':
                    layer.msg('已复制: ' + file.name);
                    break;
                case 'move':
                    layer.msg('已移动: ' + file.name);
                    break;
                case 'delete':
                    layer.confirm('确定要删除 "' + file.name + '" 吗？', {
                        title: '确认删除',
                        icon: 3,
                        btn: ['确定', '取消']
                    }, function(index){
                        const currentFiles = fileData[currentState.currentPath];
                        fileData[currentState.currentPath] = currentFiles.filter(f => f.path !== file.path);
                        
                        currentState.selectedFiles.clear();
                        renderFileList(currentState.currentPath);
                        updateSelectionCount();
                        layer.msg('已删除');
                        layer.close(index);
                    });
                    break;
            }
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            updateBreadcrumb(currentState.currentPath);
        });
    </script>
</body>
</html>